<template>
  <div class="title-balance-wrap">
    <div class="hander-flex">
      <div class="left-box">
        <div class="mark"></div>
        <span>{{name}}</span>
      </div>
      <div class="right-box">
        <slot name="right" />
      </div>
    </div>
    <!-- 内容 -->
    <div class="center"
         :style="{'height': height}">
      <span v-if="subtitle"
            class="subtitle"> {{subtitle}} </span>
      <span v-if="reason.length"
            class="">&emsp;原因：
        <span v-for="(item, index) in reason"
              :key="index">{{item}}</span>
      </span>
      <div class="box-border">
        <slot name="center" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TitleBalance',
  props: {
    name: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: ''
    },
    subtitle: {
      type: String,
      default: ''
    },
    // 未生成原因
    reason: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
.title-balance-wrap {
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--prev-border-color-grey);
  /* padding-top: 20px; */
}
.hander-flex {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
}
.left-box {
  display: flex;
  align-items: center;
}
.left-box span {
  color: #000000;
  font-weight: 400;
  line-height: 21px;
  font-size: 16px;
}
.mark {
  width: 3px;
  height: 21px;
  background-color: var(--prev-color-primary);
  margin-right: 7px;
}
.center {
  background-color: #fafafa;
  margin: 10px 0;
  border-radius: 10px;
}
.subtitle {
  padding: 8px 20px;
  background-color: var(--prev-color-primary);
  color: var(--prev-bg-white);
  font-size: 14px;
  line-height: 36px;
  text-align: center;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 28px;
}
.box-border {
  padding: 20px;
}
</style>